import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaDialog, WeaNewScroll, WeaBrowser, WeaUpload, WeaInput,WeaSea,WeaSearchGroup, WeaFormItem, } from 'ecCom';
import { Button, Spin, Tabs, Row, Col, Input, Checkbox } from 'antd';
import {WeaSwitch} from 'comsMobx';
import Collapse from './collapse.js';
import TabDiscuss from "./tabDiscuss.js"
import isEmpty from 'lodash/isEmpty';
import {WeaLocaleProvider, WeaShare } from 'ecCom';
import MySwitch from './mySwitch';
const getLabel = WeaLocaleProvider.getLabel;


const TabPane = Tabs.TabPane;
@inject('createWorkPlanStore')
@observer
class Preview extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      RoomPlanContainer: false,
      dialogType: 'preview',
    }
  }
  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {
  }

  componentWillUnmount() {
    //组件卸载时一般清理一些状态
    // consPreviewt { coworkCollectStore } = this.props;

    // coworkCollectStore.setShowSearchAd(false);
    // coworkCollectStore.saveSearchParamsFields();
  }
  render() {
    const { activeKey , createWorkPlanStore} = this.props
    const { workPlanId, chatVisible, msginfo, setParam } = createWorkPlanStore
    // let title = "查看日程";
    let { visible } = this.props;
    let TabPanes = this.getTabPanes();
    const shareParams = {
      resourcetype:2,
      resourceid:workPlanId
    }
    
    return (
      <div className="workPlan-previewWorkPlan" id="workPlan-previewWorkPlan-id" style={{ height: '100%' }}>
        <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@jik4ik`} className="workPlan-previewWorkPlan-tabs" activeKey={`${activeKey}`} onChange={this.onChange}>
          {
            TabPanes.map((element, index) => {
              return element
            })
          }
        </Tabs>
        <WeaShare ecId={`${this && this.props && this.props.ecId || ''}_WeaShare@9mzhdh`} shareParams={shareParams} visible = {chatVisible} msginfo={msginfo} onVisibleChange={bool => setParam({chatVisible:bool})}/>
      </div>
    )
  }

  getFields = () => {
    const { viewForm, status, workPlanId } = this.props.createWorkPlanStore;
    const {isFormInit} = viewForm;
    let group = [];
    const {viewFields, workplanTypeOptions} = toJS(status);
    const formParams = viewForm.getFormParams();
    isFormInit && viewFields && viewFields.map((c, _index) =>{
      let items = [];
      c.items.map(fields => {
        if(fields.domkey[0] == 'planName' && formParams && formParams[fields.domkey[0]] ) {
          let val = formParams[fields.domkey[0]] || '';
          val = val.replace(/&lt;br&gt;/g,' ');
          val = val.replace(/&lt;\/br&gt;/g,' ');
          val = val.replace(/(<br>|<\/br>)/g,' ');
          val = val.replace(/>/g,' ');
          viewForm.updateFields({
            [fields.domkey[0]]: val
          })
        }
        
        if((!formParams['remindType']) &&
          (fields.domkey[0] == 'remindImmediately' || 
            fields.domkey[0] == 'remindBeforeStart' ||
            fields.domkey[0] == 'remindBeforeEnd')) {
          return
        } else {
          if(fields.domkey[0] == 'remindBeforeStart' || fields.domkey[0] == 'remindBeforeEnd'){//提醒开始时间 提醒结束时间 上传组件单独处理
            items.push({
              com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@me24wi@${fields.domkey[0]}`}
                label={`${fields.label}`}
                labelCol={{span: `${fields.labelcol}`}}
                wrapperCol={{span: `${fields.fieldcol}`}}
                underline>
                <MySwitch ecId={`${this && this.props && this.props.ecId || ''}_MySwitch@p4mzm8@${fields.domkey[0]}`} fieldConfig={fields} form={viewForm} onChange={this.onChange}/>
              </WeaFormItem>),
              colSpan: 1
            })
          }else {
            items.push({
              com:(
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@expq8y@${fields.domkey[0]}`}
                  label={`${fields.label}`}
                  labelCol={{span: `${fields.labelcol}`}}
                  wrapperCol={{span: `${fields.fieldcol}`}}
                  // error={form.getError(fields)}
                  tipPosition="top"
                  underline
                >
                  <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@sveexr@${fields.domkey[0]}`} fieldConfig={fields} form={viewForm} formParams={formParams} onChange={this.onChange}/>
                </WeaFormItem>),
              colSpan:1,
            })
          }
        }
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@f3rvt5@${_index}`} col={1} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items}/>)
    });
    return group;
  }

  getTabPanes = () => {
    let { exchangeList } = this.props;
    exchangeList = toJS(exchangeList);
    let {isSingle,scrollHeight,oldSecretLevel,isPro}= this.props.createWorkPlanStore;
    let cnt='';
    exchangeList&&exchangeList.cnt&&exchangeList.cnt>0&& (cnt=` (${exchangeList.cnt})`);
    return [
      <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@lhxc49@detail`} tab={getLabel(2121,'详细信息')} key="1" >
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@v2c1ql@detail`} height={isSingle?'100%': scrollHeight-46 }>
        <div className="workPlan-preview-group">
          {this.getFields()}
        </div>
        </WeaNewScroll >
      </TabPane>,
      
      <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@ez4i39@discuss`} tab={getLabel(15153,'相关交流')+cnt} key="7"  >
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@cekn5l@discuss`} height={isSingle?'100%': scrollHeight-46}>
          <TabDiscuss ecId={`${this && this.props && this.props.ecId || ''}_TabDiscuss@02d1w4@discuss`}
            exchangeList={exchangeList}
            workPlanId={this.props.workPlanId}
            secretLevel={oldSecretLevel || ''}
            isfromchatshare={this.props.isfromchatshare}
            sharer={this.props.sharer}
            isPro={isPro}
          />
        </WeaNewScroll >
      </TabPane>
    ];
  }
  onChange = (e) => {
    this.props.changeTab && this.props.changeTab(e);
    if(e==='7'){
      let {readExchange}= this.props.createWorkPlanStore;
      readExchange();
    }
  }
}

export default Preview
